<template>
	<view class="choose-tags-view">
		<view class="tags-title">创建个人标签</view>
		<view class="tags-desc">提交真实信息，创业/副业变现更高效</view>
		<view class="tags-content">
			<picker mode="selector" :range="roleArr" range-key="label"
				@change="changePicker($event,'roleArr','roleText')">
				<van-cell title="您的角色类型" :border="false" is-link :value="roleText ? roleText :'请选择'" />
			</picker>
			<picker mode="selector" :range="ageArr" range-key="label" @change="changePicker($event,'ageArr','ageText')">
				<van-cell title="您的年龄区间" :border="false" is-link :value="ageText ? ageText :'请选择'" />
			</picker>
			<picker mode="selector" :range="sexArr" range-key="label" @change="changeSex">
				<van-cell title="您的性别" :border="false" is-link :value="sexText ? sexText :'请选择'" />
			</picker>
			<picker mode="region" @change="changeRegion">
				<van-cell title="您的所在城市" :border="false" is-link :value="regionText ? regionText :'请选择'" />
			</picker>
		</view>
		<view class="tags-content">
			<picker mode="selector" :range="methodArr" range-key="label"
				@change="changePicker($event,'methodArr','methodText')">
				<van-cell title="期望开展的方式" :border="false" is-link :value="methodText ? methodText :'请选择'" />
			</picker>
			<picker mode="selector" :range="aimArr" range-key="label" @change="changePicker($event,'aimArr','aimText')">
				<van-cell title="期望达到的目的" :border="false" is-link :value="aimText ? aimText :'请选择'" />
			</picker>
		</view>
		<view class="tags-content">
			<picker mode="selector" :range="channelArr" range-key="label"
				@change="changePicker($event,'channelArr','channelText')">
				<van-cell title="通过什么渠道了解到轻钉" :border="false" is-link :value="channelText ? channelText :'请选择'" />
			</picker>
		</view>
		<view class="choose-tags-btn">
			<van-button block color="#4078E5" @click="submit">完成</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				list: [],
				sexArr: [{
					label: '男',
					value: 1
				}, {
					label: '女',
					value: 2
				}],
				sexText: '',
				regionText: '', //城市

				roleArr: [], //角色类型
				roleText: '',

				ageArr: [], //年龄区间
				ageText: '',

				methodArr: [], //开展方式
				methodText: '',

				aimArr: [], //期望达到的目的
				aimText: '',

				channelArr: [], //了解到轻钉的渠道
				channelText: '',

				loginInfo: {}, //登录信息
			};
		},
		onLoad(e) {
			if (e.info) {
				this.loginInfo = JSON.parse(e.info)
			}
			if (e.type) {
				this.type = e.type
			}
			this.getInfo(2)
			this.getInfo(3)
			this.getInfo(4)
			this.getInfo(5)
			this.getInfo(6)
		},
		methods: {
			// 查询选项type:1-查询用户身份，2-角色类型，3-年龄区间，4-展望开展方式，5-期望达到的目的，6-了解到轻钉的渠道
			getInfo(type) {
				this.$api.requst(`/gwc/user/info_options`, {
					type: type
				}).then((res) => {
					if (type === 2) {
						this.roleArr = res.data
					} else if (type === 3) {
						this.ageArr = res.data
					} else if (type === 4) {
						this.methodArr = res.data
					} else if (type === 5) {
						this.aimArr = res.data
					} else if (type === 6) {
						this.channelArr = res.data
					}
				})
			},
			// 选项选择
			changePicker(e, list, type) {
				this[type] = this[list][e.detail.value].value
			},
			// 选择城市
			changeRegion(e) {
				this.regionText = e.detail.value.join(' ')
			},
			// 选择性别
			changeSex(e) {
				this.sexText = this.sexArr[e.detail.value].label
			},
			// 数据提交
			submit() {
				uni.showLoading({
					title: '数据提交中...'
				})
				this.$api.requst(`/gwc/user/upinfo`, {
					token: this.loginInfo.token,
					sex: this.sexText == '男' ? 1 : this.sexText == '女' ? 2 : '',
					region: this.regionText,
					other_info: {
						type: this.type,
						role: this.roleText,
						age_scope: this.ageText,
						start_mode: this.methodText,
						hope_result: this.aimText,
						from_channel: this.channelText
					}
				}, 'POST').then((res) => {
					this.$api.showError('提交成功！')
					uni.setStorageSync("token", this.loginInfo.token)
					uni.setStorageSync("userId", this.loginInfo.uid)
					this.$store.commit('loginChange', this.loginInfo.token);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.choose-tags-view {
		padding: 24rpx;
		box-sizing: border-box;

		.tags-title {
			font-size: 44rpx;
			font-weight: bold;
		}

		.tags-desc {
			font-size: 26rpx;
			color: #8A8F99;
			margin-top: 8rpx;
			padding-bottom: 16rpx;
		}

		.tags-content {
			background-color: #fff;
			border-radius: 4rpx;
			margin-top: 16rpx;
		}

		.choose-tags-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 16rpx 32rpx 100rpx;
		}
	}

	::v-deep .van-cell {
		padding: 34rpx 32rpx !important;
	}

	::v-deep .van-cell__title {
		flex: 2 !important;
	}
</style>